import React, {useEffect, useRef, useState} from 'react';
function Three(props) {
    const h3Ref = useRef();
    const [num,setNum] = useState(0);
    // useEffect与componentDidMount的区别：
    // 1- componentDidMount是类组件当中的钩子函数
    // 2- componentDidMount在生命周期中只执行一次，而useEffect所指定的函数有可能执行多次。
    // 3- useEffect如果有返回值，那么返回值必须是一个函数。（相当于componentWillUnmount）
    //    useEffect指定的函数不允许是async函数
    // 4- useEffect可以写多个
    useEffect(function(){
        // console.log("useEffect",document.querySelector("h3").innerText);
        // console.log(h3Ref.current.innerText);
        console.log(1,h3Ref.current)
    },[])
    useEffect(function(){
        console.log(2,h3Ref.current)
    },[])
    return (
        <div>
            <button onClick={()=>{
                setNum(num+1)
            }}>three:{num}</button>
            <h3 ref={h3Ref}>Three</h3>
            <hr/>
        </div>
    );
}

export default Three;